<template>
  <view class="allBox" v-if="wallpaperList.length>0">
    <!--  //头部背景图片 -->
    <view class="album_box">
      <view class="title_box">
        <view>
          <image :src="albumList.cover" mode="widthFix" />
        </view>
      </view>
      <view class="text_box">
        <view class="text1">{{ albumList.name }}</view>
        <view class="text2">关注专辑</view>
      </view>
    </view>
    <!-- 作者信息 -->
    <view class="author_box">
      <view class="title_box">
        <view class="image_box">
          <image :src="albumList.user.avatar" mode="widthFix" />
        </view>
        <view class="name_box">
          {{ albumList.user.name }}
        </view>
      </view>
      <view class="mainText_box">
        <text>{{ albumList.desc }}</text>
      </view>
    </view>
    <!-- 图片列表 -->
    <view class="image_box">
      <view
        class="image_box1"
        v-for="(item, index) in wallpaperList"
        :key="index"
      >
      <LinkGump :list="wallpaperList" :index="index">
        <image
          :src="item.thumb + item.rule.replace('$<Height>', 360)"
          mode="aspectFill"
        />
      </LinkGump>
      </view>
    </view>
  </view>
</template>

<script>
import LinkGump from "../../components/linkGump";
export default {
  components:{
    LinkGump
  },
  data() {
    return {
      id: 0,
      parmas: {
        limit: 30,
        skip: 0,
        order: "new",
        first: 1,
      },
      albumList: [],
      wallpaperList: [],
      isMore: true,
    };
  },
  onLoad(e) {
    this.id = e.id;
    this.getList();
  },
  onReachBottom() {
      if (this.isMore) {
        this.parmas.skip += this.parmas.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有更多了",
          icon: "none",
        });
      }
    },

  methods: {
    getList() {
      this.request({
        url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
        data: this.parmas,
      }).then((res) => {
        
        this.albumList = res.data.res.album;
        if (res.data.res.wallpaper.length === 0) {
          this.isMore = false;
          uni.showToast({
            title: "没有更多了",
            icon: "none",
          });
          return;
        }
        this.wallpaperList = [...this.wallpaperList, ...res.data.res.wallpaper];
      });
    },
    
  },
};
</script>

<style lang='scss' scope>
.album_box {
  position: relative;
  .title_box {
  }
  .text_box {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    color: #fff;
    padding: 20rpx 30rpx;
    .text1 {
      font-size: 18px;
    }
    .text2 {
      background-color: #d4237a;
      font-size: 13px;
      width: 70px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10rpx;
    }
  }
}

.author_box {
  padding: 20rpx;
  margin-bottom: 40rpx;
  .title_box {
    display: flex;
    .image_box {
      width: 37px;
    }
    .name_box {
      color: black;
      font-size: 14px;
      margin-left: 20rpx;
    }
  }
  .mainText_box {
    margin-top: 20rpx;
    font-size: 12px;
  }
}

.image_box {
  display: flex;
  flex-wrap: wrap;
  .image_box1 {
    width: 33.33%;
    border: 3rpx solid #fff;
    image {
      width: 100%;
      height: 140px;
    }
  }
}
</style>
